<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/css-1.css" />
		<style type="text/css">
			#big {
				width: 800px;
				height: 600px;
				background-image: url(img/背景.png);
				position: relative;
				margin: auto;
			}
			
			#top {
				height: 450px;
			}
			
			#top div {
				background-image: url(img/苹果.png);
				width: 63px;
				height: 71px;
				position: absolute;
				color: white;
				font-size: 30px;
				line-height: 71px;
				text-align: center;
			}
			
			#top .classa {
				background-image: url(img/破裂苹果.png);
				width: 138px;
				height: 76px;
			}
			
			#jifen {
				margin-top: 25px;
				margin-right: 20px;
				float: right;
				color: white;
				font-weight: bold;
				font-size: 20px;
				line-height: 25px;
				border-width: 0px;
			}
			
			#jifen p {
				border-width: 0px;
				margin: 0px;
			}
			
			#mid {
				position: absolute;
				top: 80px;
				left: 22%;
				width: 448px;
				height: 311px;
				background-image: url(img/设置.png);
			}
			
			#mid-div {
				position: relative;
			}
			
			#sz-1 {
				position: absolute;
				top: 180px;
				left: -65px;
				width: 70px;
				height: 35px;
				opacity: 0;
				cursor: pointer;
			}
			
			#sz-2 {
				position: absolute;
				top: 180px;
				left: 25px;
				width: 70px;
				height: 35px;
				opacity: 0;
				cursor: pointer;
			}
			
			#sz-3 {
				position: absolute;
				top: 180px;
				left: 115px;
				width: 70px;
				height: 35px;
				opacity: 0;
				cursor: pointer;
			}
			
			#mid div {
				margin-left: 250px;
				margin-top: 80px;
			}
			
			#mid div p {
				margin-top: 29px;
				padding-left: 15px;
			}
			
			#ks {
				opacity: 0;
				position: absolute;
				left: 197px;
				top: 77px;
				height: 40px;
				cursor: pointer;
			}
			
			#js {
				opacity: 0;
				position: absolute;
				left: 160px;
				top: 30px;
				height: 40px;
				cursor: pointer;
			}
			
			#zt {
				opacity: 0;
				position: absolute;
				left: 110px;
				top: 60px;
				height: 40px;
				cursor: pointer;
			}
			
			#sz {
				opacity: 0;
				position: absolute;
				left: 145px;
				top: 100px;
				height: 40px;
				cursor: pointer;
			}
			
			#foot {
				height: 150px;
				position: relative;
			}
			
			#lanzi {
				width: 250px;
				height: 150px;
				margin-left: 370px;
				position: relative;
			}
			
			#aa {
				z-index: 11;
				position: absolute;
			}
			
			#a1 {
				position: absolute;
				top: 50px;
				left: 5px;
				z-index: 1;
			}
			
			#a2 {
				position: absolute;
				top: 50px;
				left: 20px;
				z-index: 2;
			}
			
			#a3 {
				position: absolute;
				top: 50px;
				left: 44px;
				z-index: 3;
			}
			
			#a4 {
				position: absolute;
				top: 50px;
				left: 70px;
				z-index: 4;
			}
			
			#a5 {
				position: absolute;
				top: 50px;
				left: 100px;
				z-index: 5;
			}
			
			#a6 {
				position: absolute;
				top: 50px;
				left: 130px;
				z-index: 6;
			}
			
			#a7 {
				position: absolute;
				top: 30px;
				left: 30px;
				z-index: 1;
			}
			
			#a8 {
				position: absolute;
				top: 30px;
				left: 50px;
				z-index: 2;
			}
			
			#a9 {
				position: absolute;
				top: 30px;
				left: 70px;
				z-index: 3;
			}
			
			#a10 {
				position: absolute;
				top: 30px;
				left: 90px;
				z-index: 4;
			}
			
			#a11 {
				position: absolute;
				top: 30px;
				left: 110px;
				z-index: 3;
			}
			
			#a12 {
				position: absolute;
				top: 15px;
				left: 50px;
				z-index: 1;
			}
			
			#a13 {
				position: absolute;
				top: 15px;
				left: 70px;
				z-index: 1;
			}
			
			#a14 {
				position: absolute;
				top: 15px;
				left: 90px;
				z-index: 1;
			}
			
			#a15 {
				position: absolute;
				top: 90px;
				left: 145px;
				z-index: 10;
			}
			
			#a16 {
				position: absolute;
				top: 90px;
				left: 170px;
				z-index: 9;
			}
			
			#a17 {
				position: absolute;
				top: 90px;
				left: 190px;
				z-index: 8;
			}
			
			#a18 {
				position: absolute;
				top: 70px;
				left: 170px;
				z-index: 7;
			}
			
			.a1 {
				display: none;
			}
		</style>
		<script type="text/javascript">
			var miao = 59;
			var miao2 = 0;
			var fen = 1;
			var fen2 = 0;
			var sum = 0;
			var shibai = 0;
			var za;
			var zb;
			var zc;
			var sudu = 0;
			var aa = 60;
			var bb = 20;
			var ta = 1000;
			var tb = 250;
			var sj = 0;

			function kaishi() {
				console.log(miao2);
				console.log("---"+fen2);
				if(miao2 != 0 || fen2 != 0) {
					miao = miao2;
					fen = fen2;
				}else{
					miao = 59;
					fen = 2;
				}
				clearInterval(za);
				clearInterval(zb);
				clearInterval(zc);
				za = setInterval("zengjia()", ta);
				zb = setInterval("xialuo()", tb);
				zc = setInterval("shijian()", 1000);
			}

			function zanting() {
				miao2 = miao;
				fen2 = fen;
				var top = document.getElementById("top")
				clearInterval(za);
				clearInterval(zb);
				clearInterval(zc);
				top.childNodes.length = 0;
			}

			function jieshu() {
				var top = document.getElementById("top");
				var foot = document.getElementById("jifen")
				sum = 0;
				shibai = 0;
				sj = 0;
				clearInterval(za);
				clearInterval(zb);
				clearInterval(zc);
				top.innerHTML = "";
				foot.children[0].children[0].innerHTML = 0;
				foot.children[0].children[1].innerHTML = "00";
				foot.children[1].children[0].innerHTML = 0;
				foot.children[2].children[0].innerHTML = 0;
				foot.children[3].children[0].innerHTML = 0;
				var apple = document.getElementById("lanzi");
				for(var i = 1; i < apple.children.length; i++) {
					apple.children[i].style.display = "none";
				}
			}

			function shijian() {
				var jishi = document.getElementById("jifen");
				if(miao > 0 && miao < 10) {
					jishi.children[0].children[1].innerHTML = "0" + miao;
					miao--;
				} else if(miao == 0) {
					if(jishi.children[0].children[0].innerHTML == 0) {
						jishi.children[0].children[1].innerHTML = "0" + miao;
						zanting();
						alert("游戏结束");
						jieshu();
					} else {
						fen--;
						jishi.children[0].children[1].innerHTML = "0" + miao;
						miao = 59;
					}
				} else {
					jishi.children[0].children[1].innerHTML = miao;
					miao--;
				}
				sj++;
				jishi.children[0].children[0].innerHTML = fen;
				sudu = parseInt(sum / sj * 60);
				jishi.children[3].children[0].innerHTML = sudu;

			}

			function zengjia() {
				var top = document.getElementById("top")
				var div = document.createElement("div")
				var zimu = parseInt(Math.random() * 26) + 65
				top.appendChild(div);
				div.style.top = "0px";
				div.style.left = Math.random() * 700 + 10 + "px";
				div.innerHTML = "&#" + zimu + ";";
				div.setAttribute("shuzhi", zimu);
			}

			function xialuo() {
				var top = document.getElementById("top");
				var jifen = document.getElementById("jifen")

				for(var i = 0; i < top.children.length; i++) {
					var t = parseInt(top.children[i].style.top);
					t += Math.random() * 10 + 5;
					top.children[i].style.top = t + "px";
					if(t >= 370) {
						top.children[i].className = "classa";
						top.children[i].innerHTML = ""
					}
					if(t > 400) {
						top.removeChild(top.children[i]);
						shibai++;
						jifen.children[2].children[0].innerHTML = shibai;
						if(shibai == bb) {
							alert("惜败！！");
							jieshu();
						}
					}
				}
			}
			window.onkeydown = function(event) {
				var zhi = event.keyCode;
				var top = document.getElementById("top")
				var jifen = document.getElementById("jifen")
				var appleimg = document.getElementById("lanzi")
				for(var i = 0; i < top.children.length; i++) {
					var zimu = top.children[i].getAttribute("shuzhi");
					if(zhi == zimu) {
						top.removeChild(top.children[i]);
						sum++;
						jifen.children[1].children[0].innerHTML = sum;
						if(sum % 10 == 0) {
							var applesum = parseInt(sum / 10);
							appleimg.children[applesum].style.display = "block"
						}
						if(sum == aa) {
							alert("恭喜过关")
							jieshu();
						}
						break;
					}
				}
			}

			function shezhi() {
				jieshu();
				var shez = document.getElementById("mid");
				if(shez.style.display == "none") {
					shez.style.display = "block"
				} else {
					shez.style.display = "none"
				}
			}

			function chang(t) {
				var op = document.getElementById("tab");
				var mid = document.getElementById("mid");

				if(t.value == 1) {
					mid.children[0].children[1].innerHTML = 60;
					mid.children[0].children[2].innerHTML = 20;
					ta = 1000;
					tb = 250;
				} else if(t.value == 2) {
					mid.children[0].children[1].innerHTML = 120;
					mid.children[0].children[2].innerHTML = 10;
					ta = 800;
					tb = 180;
				} else {
					mid.children[0].children[1].innerHTML = 180;
					mid.children[0].children[2].innerHTML = 5;
					ta = 500;
					tb = 100;
				}
				aa = mid.children[0].children[1].innerHTML;
				bb = mid.children[0].children[2].innerHTML
			}

			function guanbi() {
				var div = document.getElementById("mid")
				div.style.display = "none";
			}
		</script>
	</head>

	<body>
		<div id="big">
			<div id="top">
			</div>
			<div id="foot">
				<input type="button" name="" id="ks" value="开始" onclick="kaishi()" />
				<input type="button" name="" id="js" value="结束" onclick="jieshu()" />
				<input type="button" name="" id="zt" value="暂停" onclick="zanting()" />
				<input type="button" name="" id="sz" value="设置" onclick="shezhi()" />
				<div id="jifen">
					<p>时间：0<span>0</span>:<span>00</span></p>
					<p>成功：<span>0</span>个</p>
					<p>失败：<span>0</span>个</p>
					<p>速度：<span>0</span>字每分钟</p>
				</div>
				<div id="lanzi">
					<img src="img/篮子.png" id="aa" />
					<img src="img/苹果2.png" style="display:none;" id="a1" />
					<img src="img/苹果2.png" style="display:none;" id="a2" />
					<img src="img/苹果2.png" style="display:none;" id="a3" />
					<img src="img/苹果2.png" style="display:none;" id="a4" />
					<img src="img/苹果2.png" style="display:none;" id="a5" />
					<img src="img/苹果2.png" style="display:none;" id="a6" />
					<img src="img/苹果2.png" style="display:none;" id="a7" />
					<img src="img/苹果2.png" style="display:none;" id="a8" />
					<img src="img/苹果2.png" style="display:none;" id="a9" />
					<img src="img/苹果2.png" style="display:none;" id="a10" />
					<img src="img/苹果2.png" style="display:none;" id="a11" />
					<img src="img/苹果2.png" style="display:none;" id="a12" />
					<img src="img/苹果2.png" style="display:none;" id="a13" />
					<img src="img/苹果2.png" style="display:none;" id="a14" />
					<img src="img/苹果2.png" style="display:none;" id="a15" />
					<img src="img/苹果2.png" style="display:none;" id="a16" />
					<img src="img/苹果2.png" style="display:none;" id="a17" />
					<img src="img/苹果2.png" style="display:none;" id="a18" />
				</div>
			</div>
			<div id="mid" style="display: none;">
				<div id="mid-div">
					<select onchange="chang(this)" id="tab">
						<option value="1">简单</option>
						<option value="2">困难</option>
						<option value="3">地狱</option>
					</select>
					<p>60</p>
					<p>20</p>
					<input type="button" id="sz-1" value="确认" onclick="guanbi()" />
					<input type="button" id="sz-2" value="确认" onclick="guanbi()" />
					<input type="button" id="sz-3" value="确认" onclick="guanbi()" />
				</div>

			</div>
		</div>
	</body>

</html>